/*Root*/

@media (max-width: 375px) {
  .logo {
    display: flex;
  }
}

/* CSS for sidebars dropdown in mobile view */

@media only screen and (max-width: 735px){
ul#languages-dropdown-items {
    display: block;
    background-color: #ffffff;
}
.stateful-applications_row {
  justify-content: center;
}
}
body{
  font-size: 16px;
}
.mainContainer {
  font-size: 16px;
  font-family: helvetica;
  font-weight: 200;
}
.mainContainer a {
  color: #3A5EE6;
}

/* Navigation header bg color */
.fixedHeaderContainer {
    background: #262B3E;
}

/* Content headers */
.container .wrapper h1 {
  font-family: helvetica;
  font-weight: 200;
    color: #262B3E;
}
.container .wrapper h2 {
    color: #262B3E;
}
.container .wrapper h3 {
    color: #262B3E;
}
.container .wrapper h4 {
    color: #262B3E;
}
.mainContainer .wrapper .post .postHeader h1 {
    font-size: 220%;
    padding: 0 0 30;
    font-family: helvetica;
  font-weight: 200;
    color: #262B3E;
}
.mainContainer .wrapper .post h1, .mainContainer .wrapper .post h2 {
    font-weight: 300;
}
.mainContainer .wrapper .post h3, .mainContainer .wrapper .post h3 {
    font-weight: 300;
}

/* Body */
body {
    color : #262B3E;
    background: #fff;
}
h1, h2, h3, h4 {
    color: #262B3E;
}
.mainContainer .wrapper .post h2 {
    font-size: 190%;
}
.mainContainer .wrapper .post h3 {
    font-size: 155%;
}
.mainContainer .wrapper .post h4 {
    font-size: 120%;
}
/* Css for image size */
img {
  max-width: max-content;
  height: auto;
}

/* CSS for footer */
footer.nav-footer {
    background: #1b1b1b;
}

footer .sitemap .nav-home {
  display: table;
  margin: -12px 20px 0 0;
  padding: 10px;
  width: 50px;
  height: 50px;
  opacity: initial;
  transition: initial;
}

footer .sitemap a {
  justify-content: center;
  align-content: center;
  display: flex;
}

/* NAV bar */

.fixedHeaderContainer header img#logo {
    height: 100%;
    margin-right: 3px;
}
.fixedHeaderContainer header img {
    height: 50%;
    margin-right: 3px;
}

.fixedHeaderContainer header h2 {
    color:#f1584d;
}

.headerTitle {
    color: #f3f3f3;
    font-weight: 200;
}

.navigationSlider .slidingNav ul li a {
    color: #aaafff;
}

.navigationSlider .slidingNav ul li a:focus,
.navigationSlider .slidingNav ul li a:hover {
    background: #f1584d;
}

/* Side bar*/
nav.toc .toggleNav {
    background: #f5f7fa;
    padding: 3%;
}

nav.toc .toggleNav ul li a {
    color: #262B3E;
    display: block;
    font-size: 14px;
    padding-left: 10px;
}
nav.toc .toggleNav .navGroup a:hover {
    color: #3A5EE6;
}
nav.toc .toggleNav .navGroup h3 {
    font-weight: 600;
    font-size: 20px;
}
nav.toc .toggleNav ul li.navListItemActive {
    background: #a9a9a9;
    color: #f5f7fa;
}
nav.toc .toggleNav ul li a.navItemActive{
    color: #f5f7fa;
}
nav.toc .toggleNav .navGroup.navGroupActive h3 {
    background:#f5f7fa;
    color:#f1584d;
    font-size: 15px;
    text-transform: uppercase;
}

nav.toc .toggleNav .navGroup.navGroupActive {
    background: #f5f7fa;
    padding: '20px 0';
}

/* Right side menu */
nav.onPageNav > ul.toc-headings > li > a {
    font-weight: bold;
}

/*Doc body*/
.mainContainer {
    background: #fff;
}


/*Layouts*/
.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.col-md-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

.mb-2,
.my-2 {
    margin-bottom: 0.5rem !important;
}

pre code {
    border-color: #F0F0F0;
}

@media (max-width: 375px) {
    .fixedHeaderContainer header img#logo {
        width: 20px;
    }
    .fixedHeaderContainer header img {
        width: 108px;
        height: auto;
    }
    .fixedHeaderContainer header h2{
        color: #fff;
    }

}

@media (max-width: 376px) and (min-width: 576px) {

    .fixedHeaderContainer header img {
        width: 141px;
        height: auto;
    }
    .fixedHeaderContainer header img#logo {
        width: 30px;
    }
    .fixedHeaderContainer header h2{
        color: #fff;
    }

}

/* css for tables */

/*
table tr th {
    background: #f2f2f2;
    font-weight: bold;
    text-transform: uppercase;
}
*/

/* css for code snippets */
.hljs, .hljs-subst {
    color: #000;
}
.hljs-built_in, .hljs-bullet, .hljs-code, .hljs-addition {
    color: #000;
}
.hljs-type, .hljs-meta, .hljs-string, .hljs-number, .hljs-selector-id, .hljs-selector-class, .hljs-quote, .hljs-template-tag, .hljs-deletion {
    color: #000;
}
.hljs-regexp, .hljs-symbol, .hljs-variable, .hljs-template-variable, .hljs-link, .hljs-selector-attr, .hljs-selector-pseudo {
    color: #000;
}

.hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
}

/* CSS for search bar */
input#search_input_react
{
    background-color: #7B787D;
    font-weight:400;
    width:500px;
    line-height: 28px;
}
input#search_input_react:focus, input#search_input_react:active {
    width: 500px;
    background-color: #7B787D;
}

#panel, .flip {
    cursor: pointer;
}

@media (max-width: 320px) {
    .ver-link-span {
      display: none;
    }
    .dropdown {
        display: inline-block;
        margin-right: auto;
        margin-left: 0px;
        margin-top: 3.5px;
    }
}

/* CSS for version dropdown */
@media only screen
and (min-device-width : 321px)
and (max-device-width : 720px) {
    element.style {
      position: relative;
    }

    .ver-link {
      cursor: pointer;
      color: #fff;
      padding: 1px 3px;
    }

    p {
      line-height: 1;
      font-size: 14px;
    }

    .ver-link-span {
        padding: 1px 3px;
        border: 1px solid white;
        vertical-align: bottom;
    }

    .dropdown {
        display: inline-block;
        margin-right: auto;
        margin-left: 0px;
        margin-top: 3.5px;
    }
}

/**
 * Styles for the Swagger API documentation (engine/api/v1.x/index.html)
 */


/* ReDoc doesn't change outer page styles */
.redoc-body{
    margin: 0px;
}
/**
 * Disable request-type badges, see https://github.com/Rebilly/ReDoc/issues/61
 */
redoc .operation-type {
    display: none !important;
}

.column2 {
  -webkit-column-width: 200px; /* Chrome, Safari, Opera */
  -moz-column-width: 200px; /* Firefox */
  column-width: 200px;
  padding-left: 15px;
}

.emphasize {
  -webkit-column-width: 800px; /* Chrome, Safari, Opera */
  -moz-column-width: 800px; /* Firefox */
  column-width: 800px;
  padding-left: 50px;
  font-size: 18px;
}

.emphasize {
  -webkit-column-width: 800px; /* Chrome, Safari, Opera */
  -moz-column-width: 800px; /* Firefox */
  column-width: 800px;
  padding-left: 50px;
  font-size: 18px;
}

/* Create three equal columns that floats next to each other */
.divcol {
  float: left;
  width: 20%;
  padding: 50px;
  height: 15px;
  font-size: 18px;
}

/* Clear floats after the columns */
.divrow:after {
  content: "";
  display: table;
  clear: both;
}

.nocopy {
  background: #F0F0F0;
  color: #000;
}

.co {
  margin: 20px 0;
  padding: .5em;
  font-size: 13px;
  font-family: monospace, monospace;
  white-space: pre;
  background-color: #F0F0F0;
  border-radius: 8px;
  overflow-x: auto;
}

/* Adding Custom CSS for Feedback section */
#feedback-question {
    padding-bottom: 8px;
}
.feedback-button {
    box-sizing: border-box;
    min-width: 0px;
    -webkit-appearance: none;
    display: inline-block;
    text-align: center;
    line-height: inherit;
    font-size: inherit;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    color: white;
    background-color: #F26D00;
    cursor: pointer;
    width: 100px;
    margin: 0px;
    text-decoration: none;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
    border-radius: 0px;
    margin-right: 16px;
}
.feedback-button:hover {
    color: #fff;
}
.feedback-button__disabled, .feedback-button__disabled:hover {
    color: #a9a9a9;
    background-color: #EFEFF2;
}
.feedback-response__hidden {
    visibility: hidden;
    display: none;
}


/* merge "Copy" code block button css into custom.css */
pre {
    position: relative;
  }
  
  pre .btnIcon {
    position: absolute;
    margin: 0;
    top: 4px;
    z-index: 2;
    cursor: pointer;
    border: 1px solid transparent;
    color: #383030;
    background-color: #f5f4f7;
    /*height: 30px;*/
    transition: all .25s ease-out;
  }
  
  pre .btnIcon:hover {
    text-decoration: none;
    background-color: #fff;
  }
  
  .btnIcon__body {
    align-items: center;
    display: flex;
    margin: 0 0;
    padding: 0 0;
  }
  
  .btnIcon svg {
    fill: currentColor;
    margin-right: .4em;
  }
  
  .btnIcon__label {
    font-size: 11px;
  }
  
  .btnClipboard {
    right: 1px;
    border-radius: 4px;
    padding: 0 8px;
  }
  
